<template>
    <div>
        <van-notice-bar
                color="#e71500"
                background="#fff"
                left-icon="volume-o"
                :text="warmprompt"
        />
        <div class="seller-details">
            <div ref="element">
                <div class="content-watermark" v-if="msg.watermark">
                    <p v-for="(item, index) in 300" ref="watermarktext">{{msg.watermark}}</p>
                </div>
            </div>
            <div class="seller-details-title">
                <p style="z-index: 2">{{msg.title}}</p>
                <p class="p2" style="z-index: 2">
                    <span class="isreturn" @click="showReturn(msg.isreturn)">{{isreturnText}}</span>
                    <!--<span class="isreturn">不对返还</span>-->
                </p>
                <p class="p2" style="z-index: 2" v-if="msg.saletype==1"><span class="isreturn"
                                                                              style="background: #4482e4; border-color: #4482e4">包{{msg.baodays}}天</span>
                </p>
                <p class="p2" style="z-index: 2" v-if="msg.intro">{{msg.intro}}</p>
            </div>
            <div class="preOrnext">
                <div class="prebtn" v-if="fanMaterials.previous == 1" @click="otherPage(fanMaterials.previousmateid)">
                    上一单
                </div>
                <div class="nextbtn" v-if="fanMaterials.nextbutton == 1"
                     @click="otherPage(fanMaterials.nextbuttonmateid)">下一单
                </div>
            </div>
            <div class="seller-details-box">
                <span class="i_1 iconmtype" v-if="msg.mtype=='1'">红</span>
                <span class="i_2 iconmtype" v-else-if="msg.mtype=='2'">黑</span>
                <span class="i_3 iconmtype" v-else-if="msg.mtype=='3'">走</span>
                <div class="top" style="padding: 0 15px; box-sizing: border-box">
                    <p class="time"><b>发布于&nbsp;&nbsp;</b>{{msg.createtime}}</p>
                </div>
                <div class="content" style="padding: 0 15px; box-sizing: border-box">
                    <div v-if="msg.saletype==1 && msg.baoshi.yanshi && msg.baoshi.yanshi.length>0"
                         style="margin-top: 12px; color: #fc5d4d;">
                        <div style="font-weight: bold; margin-bottom: 5px">作者操作：</div>
                        <div v-for="(item,index ) in msg.baoshi.yanshi">当前包时段内的用户包时延长【{{item.yanshidays}}天】</div>
                    </div>
                    <div v-for="(item,index) in msg.mfcontent">
                        <div class="text">{{item.content}}</div>
                        <div v-for="(pic,indexs) in item.pics">
                            <!-- @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()"-->
                            <!-- <img :src="Url+pic"  v-if="pic" @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()" ref="qrcode"/> -->
                            <!-- <img :src="Url+pic" /> -->
                            <van-image
                                    width="100%"
                                    height="100%"
                                    v-if="pic"
                                    :src="Url+pic"
                            />
                        </div>
                        <div style="display: flex;margin-left: 60%">
                                    <span class="delbtn" style="background-color: #4482e4;margin-right: 10px"
                                          @click="editcontent(item)">编辑</span>
                            <span class="delbtn" @click="delcontent(item.id)">删除</span>
                        </div>
                    </div>
                    <div ref="element" style="position: relative; overflow: hidden; margin-top: 24px;">
                        <!--<div class="content-watermark" v-if="msg.watermark">-->
                        <!--<p v-for="(item, index) in cols" ref="watermarktext">{{msg.watermark}}</p>-->
                        <!--</div>-->
                        <div v-for="(item,index) in msg.pricecontent" class="contentgroup">
                            <div class="contentgroup_line01">
                                <span>更新于：{{item.createtime}}</span>
                            </div>
                            <div class="text" style="z-index: 9">{{item.content}}</div>
                            <div v-for="(pic,indexs) in item.pics">
                                <!-- @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()"-->
                                <!-- <img :src="Url+pic"  v-if="pic" @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()" ref="qrcode"/> -->
                                <!-- <img :src="Url+pic" /> -->
                                <van-image
                                        width="100%"
                                        height="100%"
                                        style="z-index: 9"
                                        v-if="pic"
                                        :src="Url+pic"
                                />
                            </div>
                            <div style="margin-left: 60%;display: flex">
                                    <span class="delbtn" style="background-color: #4482e4;margin-right: 10px"
                                          @click="editcontent(item)">编辑</span>
                                <span class="delbtn" @click="delcontent(item.id)">删除</span>
                            </div>
                        </div>
                    </div>
                    <div class="seller-details-box" v-if="mbtsbutton==1">
                        <div class="codeusermsg">
                            <div class="left">
                                <img :src="users_gz.avatar"/>
                            </div>
                            <div class="right">
                                <p><font></font>
                                    <!-- react-text: 1463 -->Hi~
                                    <!-- /react-text --><span><img style=" width: .5rem;"
                                                                   src=""/></span>
                                    <!-- react-text: 1466 -->你暂时还收不到我的最新消息哦~&nbsp;&nbsp;&nbsp;&nbsp;
                                    <!-- /react-text --><b class="red_ft">点击下方按钮，第一时间接收新料推送~ </b></p>
                            </div>
                        </div>
                        <a class="seller-details-gztx_btn" @click="showgzerwm()">接收消息通知</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="seller-details_bar" @click="updateliao()"><a class="update"><span>更新料</span></a></div>
        <div class="seller-details_bar noticebar" @click="noticeliao()"
             v-if="msg.noticestatus==1 && msg.noticenumber>0"><a class="update"><span>通知粉丝</span></a></div>
        <ul id="seller-details-state" class="" @click="addflag()">
            <p class="seller-details-state_top_btn_4"></p>
        </ul>
        <ul class="addflag" v-if="addflags">
            <li class="reset" @click="mtype(0)">重置</li>
            <li class="zou" @click="mtype(3)">走</li>
            <li class="black" @click="mtype(2)">黑</li>
            <li class="red " @click="mtype(1)">红</li>
        </ul>

        <div class="noticepops" v-if="showhasbeennoticenumber">
            <div class="main">
                <span class="closebtn" @click="showhasbeennoticenumber = false">×</span>
                <div class="title">平台使用协议<span v-if="times != 0 && xieyiInfo.djsshow == 1">({{times}}s)</span></div>
                <div class="num">
                    <div v-html="xieyiInfo.xieyi.content"></div>
                    <van-checkbox size="12px" v-model="isChecked">
                        <span style="color: #fc5d4d;font-size: 13px">请确认您已阅读并同意<span style="color: #4482e4" @click="shoWxieyiClick">《{{xieyiInfo.xieyi.title}}》</span>且立即推送料详情内容。</span>
                    </van-checkbox>
                </div>
                <div>
                    <template v-if="xieyiInfo.djsshow == 0">
                        <div class="noticebtn">
                            <div @click="showhasbeennoticenumber=false">取消</div>
                            <div style="color: #4482e4" @click="hasbeennoticenumberclick">确定</div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="noticebtn" v-if="times == 0">
                            <div @click="showhasbeennoticenumber=false">取消</div>
                            <div style="color: #4482e4" @click="hasbeennoticenumberclick">确定</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="noticepops" v-if="showhasbeennoticenumbers">
            <div class="main">
                <span class="closebtn" @click="showhasbeennoticenumbers = false">×</span>
                <div class="title">平台使用协议<span v-if="times != 0 && xieyiInfo.djsshow == 1">({{times}}s)</span></div>
                <div class="num">
                    <div v-html="xieyiInfo.xieyi.content"></div>
                    <van-checkbox size="12px" v-model="isChecked">
                        <span style="color: #fc5d4d;font-size: 13px">请确认您已阅读并同意<span style="color: #4482e4" @click="shoWxieyiClick">《{{xieyiInfo.xieyi.title}}》</span></span>
                    </van-checkbox>
                </div>
                <div>
                    <template v-if="xieyiInfo.djsshow == 0">
                        <div class="noticebtn">
                            <div @click="showhasbeennoticenumbers=false">取消</div>
                            <div style="color: #4482e4" @click="hasbeennoticenumberclicks">确定</div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="noticebtn" v-if="times == 0">
                            <div @click="showhasbeennoticenumbers=false">取消</div>
                            <div style="color: #4482e4" @click="hasbeennoticenumberclicks">确定</div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="noticepop" v-if="shownoticpop">
            <div class="main">
                <span class="closebtn" @click="shownoticpop=false">×</span>
                <div class="title">更新推送</div>
                <div class="num" v-if="msg.saletype == 0">当前料剩余推送次数{{msg.noticenumber}}/6</div>
                <ul class="checkbox">
                    <li :class="fanstype==0?'active':''" @click="changefanstype(0)"><span><img
                            src="../../assets/img/checked.png"/> </span> 查看过的粉丝（含购买过的粉丝）
                    </li>
                    <li :class="fanstype==1?'active':''" @click="changefanstype(1)"><span><img
                            src="../../assets/img/checked.png"/> </span>只提醒购买过的粉丝
                    </li>
                </ul>
                <div class="noticebtn">
                    <div @click="shownoticpop=false">取消</div>
                    <div style="color: #4482e4" @click="noticecomfirm()">确定</div>
                </div>
            </div>
        </div>
        <div v-if="showcode01" class="pop" style="z-index: 999">
            <div class="popmain">
                <div class="titlepop">接收消息通知</div>
                <div class="usermsg">
                    <img :src="users_gz.avatar"/>
                    <div class="usermsg_r">
                        <div class="name">{{users_gz.nickname}}</div>
                        <div class="tips">关注<span>“红料大全”</span>，就能第一时间收到我的更新推送哦～</div>
                    </div>
                </div>
                <img :src="Url+erweimagz" class="guanzhucode"/>
                <div class="tips01">↑↑长按识别二维码，订阅推送消息</div>
                <img src="../../assets/img/closeicon.png" class="closeicon" @click="showcode01=false"/>
            </div>
        </div>
        <van-loading v-if="clickloadicon" class="iconload" color="#1989fa"/>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                fanMaterials: {
                    previous: 0,
                    previousmateid: 0,
                    nextbutton: 0,
                    nextbuttonmateid: 0,
                },
                materialsid: "",
                msg: "",
                isreturnText: "体育资讯",
                picsmf: [],
                picssf: [],
                addflags: false,  //添加标签
                hasbeennoticenumber: null,
                showhasbeennoticenumber: false,
                showhasbeennoticenumbers: false,
                isChecked: false,
                xieyiInfo: {
                    detailshow: 0,
                    djsshow: 0,
                    xieyi: {
                        title: '',
                        description: '',
                        content: '',
                    }
                },// 协议相关
                cols: 100,
                renderh: 0,  //文章渲染的高度
                scroll: 0,  //页面滚动的高度
                shownoticpop: false,  //通知粉丝弹框
                fanstype: 0,          //选择通知粉丝类型
                clickloadicon: false,
                mbtsbutton: "",   //是否显示关注公主号按钮   1 显示  0 不显示
                warmprompt: "",   //顶部滚动内容
                showcode01: false,
                users_gz: "",
                timer: null,
                times: 30
            }
        },
        mounted() {
            document.body.style.backgroundColor = "#ffffff";
            this.materialsid = this.$route.params.id;
            this.getDetail();
            this.getgzherweima();
            this.getfanMaterials();
            this.setxieyidjs();
            window.addEventListener('scroll', this.scrollTop)
        },
        updated() {
            console.log(this.$refs);
        },
        beforeDestroy() {
            window.removeEventListener("scroll", this.scrollTop)
            document.querySelector("body").removeAttribute("style");
            document.body.style.fontSize = "12px";
        },
        watch: {
            showhasbeennoticenumber(){
                this.times = 30;
            },
            showhasbeennoticenumbers(){
                this.times = 30;
            },
            $route(to, from) {
                var that = this;
                that.materialsid = to.params.id
                //console.log( to.params.id , from.params.id )
                // to , from 分别表示从哪跳转到哪，都是一个对象
                // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
                this.getDetail();
                this.getgzherweima();
                this.getfanMaterials();
                that.getfanMaterials()
            }
        },
        methods: {
            /* 不对返还 */
            showReturn(type){
                if(type != 1) return false;
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '不对返还',
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 倒计时 */
            getTime() {
                this.timer = setInterval(()=>{
                    this.times--
                    if(this.times===0){
                        clearInterval(this.timer)
                    }
                },1000)
            },
            /* 是否显示协议 */
            shoWxieyiClick(){
                this.$dialog.confirm({
                    title: this.xieyiInfo.xieyi.title,
                    message: this.xieyiInfo.xieyi.content,
                    showCancelButton: false,
                    messageAlign: 'left'
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 倒计时判断接口 */
            setxieyidjs() {
                let that = this;
                that.request1.post1({
                    url: that.Url + "api/materials/xieyidjs",
                    params: {},
                    success: function (res) {
                        that.xieyiInfo = res.data.data;
                        // if(that.xieyiInfo.djs24show == 1) return that.getTime(),that.showhasbeennoticenumbers = true;
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            /* 获取翻页数据 */
            getfanMaterials() {
                let that = this;
                that.request1.post1({
                    url: that.Url + "api/materials/fanMaterials",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.fanMaterials = res.data.data;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            otherPage(id) {
                console.log(id);
                this.$router.replace({path: '/Wodeliao/detail1content/' + id})
            },
            //点击接收推送按钮
            showgzerwm() {
                this.showcode01 = true;
            },
            getgzherweima() {
                var that = this;

                that.request1.get1({
                    url: that.Url + "api/materials/showgzherweima",
                    params: {},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.erweimagz = res.data.data.gzherweima;
                            that.users_gz = res.data.data.user;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            /* 修改单个料内容 */
            editcontent(item) {
                console.log(item);
                // item.pics.push('https://t11.baidu.com/it/u=936451731,154452278&fm=30&app=106&f=JPEG?w=312&h=208&s=A8C27A23471025DA5EE11C030100A0C1')
                this.$router.push("/Wodeliao/edit/" + this.materialsid + '/' + item.id);
                // this.$router.push({path:'/Wodeliao/edit',query:{materialsid:this.materialsid,contenid: item.id,content:item.content,pics:item.pics}});
                // this.$router.push({path:'/Wodeliao/edit',params:{materialsid:this.materialsid,contenid: item.id,info:JSON.stringify(item)}});
            },
            //删除单个料内容
            delcontent(id) {
                var that = this;

                that.$dialog.confirm({
                    title: '删除',
                    message: '是否删除当前更新内容',
                    cancelButtonText: "否",
                    confirmButtonText: "是"
                }).then(() => {
                    that.request1.post1({
                        url: that.Url + "api/materials/delMateContent",
                        params: {materialsid: that.materialsid, contentid: id},
                        success: function (res) {
                            that.loading = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("删除成功");
                                that.getDetail();
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            //确定通知粉丝
            noticecomfirm() {
                var that = this;

                if (that.clickloadicon == false) {
                    console.log("点击确定");
                    that.clickloadicon = true;
                    that.request1.post1({
                        url: that.Url + "api/materials/notification",
                        params: {materialsid: that.materialsid, fanstype: that.fanstype},
                        success: function (res) {
                            that.clickloadicon = false;
                            console.log(res)
                            if (res.data.code == 1) {
                                that.$toast.success("通知成功");
                                that.getDetail();
                                that.shownoticpop = false;
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    })
                }

            },
            // 通知粉丝选择粉丝类型
            changefanstype(num) {
                this.fanstype = num;
            },
            //点击通知粉丝
            noticeliao() {
                if(this.xieyiInfo.djs24show == 0) return this.shownoticpop = true;
                if (this.hasbeennoticenumber === 0) {
                    this.getTime();
                    this.showhasbeennoticenumber = true;
                }else{
                    this.shownoticpop = true;
                }
            },
            hasbeennoticenumberclicks(){
                if (!this.isChecked) return this.$toast('请确认您已阅读并同意《内江星智云网络科技有限公司平台使用协议》后才能正常使用此功能');
                this.showhasbeennoticenumbers = false;
            },
            hasbeennoticenumberclick() {
                if (!this.isChecked) return this.$toast('请确认您已阅读并同意《内江星智云网络科技有限公司平台使用协议》后才能正常使用此功能');
                this.showhasbeennoticenumber = false;
                this.shownoticpop = true
            },
            scrollTop() {
                this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                if (this.scroll >= (this.renderh)) {
                    this.setwatermarknum();
                }
            },
            // 设置水印循环数量
            setwatermarknum() {
                var that = this;

                if (that.msg.watermark && that.msg.watermark.length > 0) {
                    that.$nextTick(() => {
                        var h = that.$refs.element.offsetHeight;
                        var rows = Math.ceil(document.body.clientWidth / that.$refs.watermarktext[0].offsetWidth);
                        var line = Math.ceil(h / that.$refs.watermarktext[0].offsetHeight);
                        that.cols = Math.ceil(rows * line);
                        that.renderh = that.$refs.element.offsetTop + h;

                        console.log("rows:" + rows);
                        console.log("line:" + line);
                        console.log("h:" + h);
                    })

                }
            },
            //更新料
            updateliao() {
                this.$router.push("/Wodeliao/update/" + this.materialsid)
            },
            //  添加料标签
            mtype(num) {
                var that = this;

                that.request1.post1({
                    url: that.Url + "api/materials/mtypeSave",
                    params: {materialsid: that.materialsid, mtype: num},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.$toast.success("添加成功");
                            that.addflags = false;
                            that.getDetail()
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            addflag() {
                this.addflags = this.addflags ? false : true
            },

            getDetail() {
                var that = this;
                that.request1.post1({
                    url: that.Url + "api/materials/myDetailContent",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.warmprompt = res.data.data.warmprompt;
                            that.mbtsbutton = res.data.data.mbtsbutton;
                            that.hasbeennoticenumber = res.data.data.materials.hasbeennoticenumber;
                            that.msg = res.data.data.materials;


                            that.setwatermarknum();
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .pop {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .pop .popmain {
        width: 80%;
        height: 420px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 10%;
        top: calc(50% - 210px);
        padding: 12px;
        box-sizing: border-box;
    }

    .pop .popmain .closeicon {
        position: absolute;
        right: 16px;
        top: 20px;
        width: 14px;
        height: 14px;
    }

    .pop .popmain .titlepop {
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 36px;
    }

    .pop .popmain .usermsg {
        width: 94%;
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 20px auto;
    }

    .pop .popmain .usermsg img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    .pop .popmain .usermsg .usermsg_r {
        width: calc(100% - 62px);
    }

    .pop .popmain .usermsg .usermsg_r .name {
        font-size: 14px;
        line-height: 36px;
    }

    .pop .popmain .tips {
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        width: 100%;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .pop .popmain .tips span {
        color: red;
    }

    .pop .popmain .guanzhucode {
        width: 148px;
        height: 148px;
        display: block;
        margin: 28px auto 0;
    }

    .pop .popmain .tips01 {
        width: 100%;
        line-height: 28px;
        margin: 20px auto;
        text-align: center;
        background: #fdfbb9;
        border-radius: 14px;
        color: #ca7952;
        font-size: 14px;
    }

    .codeusermsg {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .codeusermsg .left, .codeusermsg .left img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    .codeusermsg .right {
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
        width: calc(100% - 62px);
    }

    .preOrnext {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        /*background-color: #ffffff;*/
        z-index: 2;
    }

    .prebtn, .nextbtn {
        background-color: #f9883c;
        color: #fff;
        font-size: 12px;
        padding: 5px 10px;
        z-index: 2;
    }

    .seller-details-gztx_btn {
        width: 74%;
        display: block;
        background: #4482e4;
        margin: 0.5rem auto;
        height: 42px;
        text-align: center;
        line-height: 42px;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
    }

    .iconload {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
        z-index: 99999;
    }

    .contentgroup {
        margin-bottom: 24px;
        padding-top: 24px;
        position: relative;
        border-top: 1px solid #ccc;
    }

    /*.contentgroup:before{*/
    /*content: " ";*/
    /*display: block;*/
    /*width: calc(100% + 30px);*/
    /*height: 1px;*/
    /*background: #ccc;*/
    /*position: absolute;*/
    /*left: -15px;*/
    /*top: 0;*/
    /*z-index: 99;*/
    /*}*/
    .contentgroup .contentgroup_line01 {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        z-index: 9;
    }

    .contentgroup .delbtn {
        background: #ccc;
        color: #fff;
        height: 20px;
        width: 54px;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
        position: relative;
        z-index: 999;
        padding: 2px 10px;
        max-width: 40px;
    }

    .delbtn {
        background: #ccc;
        color: #fff;
        height: 20px;
        width: 54px;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
        position: relative;
        z-index: 999;
        padding: 2px 10px;
        max-width: 40px;
    }

    .seller-details {
        margin-bottom: 80px;
        z-index: 2;
    }

    .seller-details .seller-details-title {
        /*background: #fff;*/
        padding-bottom: 20px;
        overflow: hidden;
        z-index: 2;
    }

    .seller-details .seller-details-title p {
        margin-top: 20px;
        display: block;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
        z-index: 2;
    }

    .seller-details .seller-details-title p.p2 {
        margin-top: 3px;
        display: block;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        padding: 0 25px;
    }

    .seller-details .seller-details-title p.p2 .isreturn {
        border: 0.5px solid #ef4433;
        background: #ef4433;
        border-radius: 5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
    }

    .seller-details .seller-details-box {
        border-top: 1px solid #e4e4e4;
        /*background: #fff;*/
        overflow: hidden;
        padding: 15px 0;
    }

    .seller-details .seller-details-box .top {
        overflow: hidden;
    }

    .seller-details .seller-details-box .top .time {
        float: left;
        display: block;
        font-size: 12px;
        color: #999;
        line-height: 22px;
    }

    .seller-details .seller-details-box .content {
        position: relative;
        overflow: hidden;
    }

    .seller-details .seller-details-box .content img {
        width: 100%;
    }

    .seller-details .seller-details-box .content .content-watermark {
        width: 150%;
        left: -25%;
        height: 100%;
        position: absolute;
        top: -10px;
        z-index: 2;
    }

    .content-watermark {
        width: 150%;
        height: 100vh;
        position: fixed;
        z-index: -1;
    }

    .content-watermark p {
        font-weight: 700;
        display: block;
        float: left;
        font-size: 13px;
        margin: 18px 7px;
        text-shadow: -1px 0 #c2c2c2, 0 1px #c2c2c2, 1px 0 #c2c2c2, 0 1px #c2c2c2;
        color: #fff;
        opacity: .35;
        transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
    }

    .seller-details .seller-details-box .content .content-watermark p {
        font-weight: 700;
        display: block;
        float: left;
        font-size: 13px;
        margin: 18px 7px;
        text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #000, 0 1px #999;
        color: #fff;
        opacity: .35;
        transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
    }


    .seller-details .seller-details-box .text {
        padding: 20px 0 10px;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: .5px;
        white-space: pre-line;
    }

    .seller-details_bar {
        height: 36px;
        width: 56px;
        position: fixed;
        bottom: 15px;
        right: 15px;
        padding-top: 20px;
        background: url() #fc5d4d no-repeat center 11px;
        background-size: 14px;
        border-radius: 100px;
        box-shadow: 0 5px 10px #f6a59f;
        z-index: 999;
    }

    .seller-details_bar a {
        display: block;
        height: 36px;
        line-height: 30px;
        width: 56px;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .seller-details_bar a span {
        display: inline-block;
    }

    .seller-details_bar.noticebar {
        background: url("../../assets/img/noticeicon.png") #4482e4 no-repeat center 10px;
        bottom: 105px;
        right: 15px;
        box-shadow: 0 1px 5px #4482e4;
    }

    #seller-details-state {
        position: fixed;
        left: 15px;
        bottom: 15px;
        width: 56px;
        height: 56px;
        line-height: 56px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #fff;
        cursor: pointer;
        z-index: 999;
    }

    #seller-details-state .seller-details-state_top_btn_3, #seller-details-state .seller-details-state_top_btn_4 {
        display: block;
        color: #fff65e;
        z-index: 99999999;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    #seller-details-state .seller-details-state_top_btn_4 {
        background: url() 50% no-repeat;
        background-size: 56px;
    }

    .addflag li {
        position: fixed;
        width: 42px;
        height: 42px;
        line-height: 42px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #fff;
        cursor: pointer;
        border-radius: 50%;
        font-size: 16px;
        font-weight: bold;
        z-index: 999;
    }

    .addflag .reset {
        left: 20px;
        bottom: 150px;
        background: #fff;
        color: #999;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        font-weight: normal;
    }

    .addflag .zou {
        left: 82px;
        bottom: 128px;
        background: #4482e4;
        box-shadow: 0 0 5px #4482e4;
    }

    .addflag .black {
        left: 122px;
        bottom: 80px;
        background: #000;
        box-shadow: 0 0 5px #000;
    }

    .addflag .red {
        left: 140px;
        bottom: 20px;
        background: #fc5d4d;
        box-shadow: 0 0px 6px #fc5d4d;
    }

    .noticepop {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
    }

    .noticepop .main {
        width: 84%;
        height: 220px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        margin-top: -110px;
        left: 8%;
        padding-top: 15px;
        box-sizing: border-box;
    }

    .noticepop .closebtn {
        position: absolute;
        right: 18px;
        top: 10px;
        font-size: 24px;
    }

    .noticepop .title {
        width: 100%;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 16px;
        /*font-weight: bold;*/
    }

    .noticepop .num {
        color: #fc5d4d;
        text-align: center;
    }

    .noticepop .noticebtn {
        width: 100%;
        display: flex;
        flex-flow: row;
        height: 52px;
        border-top: 1px solid #ccc;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .noticepop .noticebtn div {
        width: 50%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 15px;
    }

    .noticepop .noticebtn div:first-child {
        border-right: 1px solid #ccc;
        box-sizing: border-box;
    }

    .noticepop .checkbox {
        width: 90%;
        margin: auto;
        margin-top: 10px;
    }

    .noticepop .checkbox li {
        background: #fff7dc;
        padding: 0 10px;
        box-sizing: border-box;
        width: 100%;
        height: 30px;
        border-radius: 5px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #000;
    }

    .noticepop .checkbox li span {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-right: 16px;
    }

    .noticepop .checkbox li span img {
        display: none;
    }

    .noticepop .checkbox li.active span {
        border-color: #fc5d4d;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .noticepop .checkbox li.active span img {
        display: flex;
        width: 14px;
        height: 14px;
    }

    .seller-details-box .iconmtype {
        position: absolute;
        width: 60px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        border: 2px solid #7a7a7a;
        color: #000;
        left: 37%;
        font-size: 16px;
        font-weight: bold;
        opacity: 0.5;
        transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
    }

    .iconmtype.i_1 {
        border-color: #e71500;
        color: #ef1701;
        background: rgba(255, 244, 243, 0.6);
    }

    .iconmtype.i_3 {
        border-color: #1565e5;
        color: #1062e3;
        background: rgba(242, 247, 255, 0.6);
    }

    .noticepops {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
    }

    .noticepops .main {
        width: 80%;
        height: 450px;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 28%;
        margin-top: -75px;
        left: 10%;
        padding-top: 15px;
        box-sizing: border-box;
    }

    .noticepops .closebtn {
        position: absolute;
        right: 18px;
        top: 10px;
        font-size: 24px;
    }

    .noticepops .title {
        width: 100%;
        height: 42px;
        line-height: 25px;
        text-align: center;
        font-size: 16px;
        /*font-weight: bold;*/
    }

    .noticepops .num {
        /*color: #fc5d4d;*/
        text-indent: 2em;
        text-align: left;
        padding: 0 10px 30px 10px;
        overflow: scroll;
        height: 310px;
        line-height: 22px;
    }

    .num /deep/.van-checkbox__icon .van-icon{
        position: relative;
    }
    .num /deep/.van-icon-success::before{
        right: 0;
        position: absolute;
    }

    .noticepops .noticebtn {
        width: 100%;
        display: flex;
        flex-flow: row;
        height: 52px;
        border-top: 1px solid #ccc;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .noticepops .noticebtn div {
        width: 50%;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-size: 15px;
    }

    .noticepops .noticebtn div:first-child {
        border-right: 1px solid #ccc;
        box-sizing: border-box;
    }
</style>